<template>
  <div class="box-card">
  
      <el-form :inline="true" ref="formRef">
        <el-form-item label="任务编号">
          <el-input class="ipt" v-model="form.taskId" />
        </el-form-item>

        <el-form-item>
          <el-button-group  >
            <el-button type="primary" :icon="CaretTop" >
              从近到远
            </el-button>
            <el-button type="danger" :icon="CaretBottom">
              从远到近
            </el-button>
          </el-button-group>
        </el-form-item>

        

        <div class="operation" style=" grid-row: 1/span 1;">
          <el-button type="primary" :icon="Search">搜索</el-button>
          <el-button :icon="Delete">重置</el-button>
          <el-button
            type="primary"
            link
            class="search-isOpen"
            @click="collapsed = !collapsed"
          >
            {{ collapsed ? "展开" : "合并" }}
            <el-icon class="el-icon--right">
              <component :is="collapsed ? ArrowDown : ArrowUp"></component>
            </el-icon>
          </el-button>
        </div>
      </el-form>

  </div>
</template>

<script setup>
import Grid from "@/components/Grid/index.vue";
import GridItem from "@/components/Grid/components/GridItem.vue";
import { Delete, Search, ArrowDown, ArrowUp ,Edit,Share,CaretTop,CaretBottom} from "@element-plus/icons-vue";
// import SearchFormItem from "./components/SearchFormItem.vue";
import { onMounted, reactive, ref } from "vue";


// 是否默认折叠搜索项
const collapsed = ref(true);

let form = reactive({
  taskId: "",
});


</script>

<style lang="scss" scoped>
  .box-card{
    background-color: #fff;
    padding: 10px;
    // height: 200px;
    // height: 100px;
    // height: 100%;
    // margin-bottom: 10px;
    // background-color: blue;
    box-sizing: border-box;
    border-radius: 4px;
  }

.el-form {
  display: grid;
  gap: 0px 20px;
  align-items: center;
  width: 100%;
  // justify-content: center;
  // align-items: center;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  .el-form-item__content > * {
    width: 100%;
  }

  // 去除时间选择器上下 padding
  .el-range-editor.el-input__wrapper {
    padding: 0 10px;
    align-items: center;
  }
  .operation {
  display: flex;
  // align-items: center;
  justify-content: flex-end;
  // justify-content: flex-end;
  // align-items: flex-end;
  // margin-bottom: 18px;
    // grid-row: 1/3;
  grid-column:3/span 1 ;
}
}

</style>